package org.example.xin_yue_song.ui.components

import androidx.annotation.StringRes
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.example.xin_yue_song.R

val inputComponentPadding = 8.dp

@Composable
fun XYInputComponent(@StringRes labelId: Int, value: String, onValueChange: (String)->Unit, ) {

  Spacer(modifier = Modifier.height(inputComponentPadding))
  OutlinedTextField(
    value = value,
    onValueChange = onValueChange,
    label = {
      Text(
        text = stringResource(labelId),
        fontSize = 16.sp,
      )
    },
    singleLine = true,
    shape = RoundedCornerShape(16.dp),
    modifier = Modifier

  )
  Spacer(modifier = Modifier.height(inputComponentPadding))

}


@Composable
fun XYPasswordInputComponent(@StringRes labelId: Int, value: String, onValueChange: (String)->Unit, ) {

  Spacer(modifier = Modifier.height(inputComponentPadding))
  OutlinedTextField(
    value = value,
    onValueChange = onValueChange,
    label = {
      Text(
        text = stringResource(labelId),
        fontSize = 16.sp,
      )
    },
    visualTransformation = PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
    singleLine = true,
    shape = RoundedCornerShape(16.dp),
    modifier = Modifier

  )
  Spacer(modifier = Modifier.height(inputComponentPadding))

}

@Preview(showBackground = true)
@Composable
private fun XYInputComponentPreview() {
  XYInputComponent(R.string.input_phone, "") {}
}